<template>
  <div>
    <h2>{{ counter }}</h2>
    <button @click="changeCounter">改变counter</button>
    <h2>{{ user.name }}</h2>
    <button @click="changeUsername">改变User的name</button>
  </div>
</template>

<script>
import { ref, reactive, computed } from "vue";
export default {
  data() {
    return {
      message: "helloworld",
    };
  },
  setup() {
    
    const counter = ref(0);
   
    const msg=ref('helloworld')
    const reverseMsg=computed(()=>{//返回个带有value属性的对象
      return msg.value.split('').reverse().join('')
    })
    console.log(reverseMsg.value);
    const user = reactive({
      name: "张三",
      age: 18,
      reverseMsg:computed(()=>{
        return msg.value.split('').reverse().join('')
      })
    });
    return { counter, user,msg };
  },
  //选项式API
  computed:{
    reverseMsg:function(){
      return this.message.split('').reverse().join('')
    }
  }

};
</script>
<style lang='less' scoped>
</style>